<template>
	<view>
		<u-navbar title="我的VIP" :border-bottom='false' back-icon-size='48'></u-navbar>
		<view class="mian">
			<view class="total" :class="{act1:vipCardNum == 0}">
				<view class="title">
					可领取VIP名额
				</view>
				<view class="num">
					{{vipCardNum}}<text>(张)</text>
				</view>
			</view>
			<view class="tip" v-if="vipCardNum == 0">
				您暂无可领取的卡片
			</view>
			<view class="infoBox" v-if="vipCardNum != 0">
				<view class="lable">
					填写收货地址
				</view>
				<view class="infoBox-ul">
					<view class="infoBox-li">
						<view class="text">
							姓名
						</view>
						<view class="input">
							<input type="text" placeholder="请输入收货人姓名"
								placeholder-style="color: rgba(153, 153, 153, 0.5);" v-model="consignee" />
						</view>
					</view>
					<view class="infoBox-li">
						<view class="text">
							手机号
						</view>
						<view class="input">
							<input type="text" placeholder="请输入收货人手机号"
								placeholder-style="color: rgba(153, 153, 153, 0.5);" v-model="link" />
						</view>
					</view>
					<view class="infoBox-li">
						<view class="text">
							收货地址
						</view>
						<view class="input">
							<input type="text" placeholder="请选择所在地区"
								placeholder-style="color: rgba(153, 153, 153, 0.5);" v-model="cityAdd" />
							<u-icon style='margin-left: auto;' name="arrow-right" color="#999999" size="32"
								@click="showCity=true"></u-icon>
						</view>
					</view>
					<view class="infoBox-li">
						<view class="text">
							详细地址
						</view>
						<view class="input">
							<input type="text" placeholder="如：街道、门牌、小区、单元"
								placeholder-style="color: rgba(153, 153, 153, 0.5);" v-model="address" />
						</view>
					</view>
					<view class="infoBox-li">
						<view class="text">
							领取数量
						</view>
						<view class="input">
							<input type="number" placeholder="请输入领取数量(5张起)"
								placeholder-style="color: rgba(153, 153, 153, 0.5);" v-model="num" />
						</view>
					</view>
				</view>
			</view>
			<view class="config act" v-if="vipCardNum != 0" @click="sunmitAdd">
				确认领取
			</view>
		</view>

		<u-picker v-model="showCity" mode="region" @confirm='cityConfirm'></u-picker>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showCity: false,
				vipCardNum: 0,
				consignee: '',
				link: '',
				cityAdd: '',
				address: '',
				num: '',
				prov: '',
				city: '',
				dist: ''
			}
		},
		onLoad() {
			this.vipCardNum = this.$store.state.userInfo.card_num
		},
		methods: {
			cityConfirm(e) {
				this.cityAdd = e.province.label + ' ' + e.city.label + ' ' + e.area.label
				this.prov = e.province.label
				this.city = e.city.label
				this.dist = e.area.label
			},
			// 领取vip
			async sunmitAdd() {
				let {
					consignee,
					link,
					cityAdd,
					address,
					prov,
					city,
					dist,
					num
				} = this
				if (!consignee && !link && !cityAdd && !address) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}
				if (!num) {
					uni.showToast({
						title: '请输入领取数量',
						icon: 'none'
					})
					return
				}
				let res = await myRequest.getVipCard({
					consignee,
					link,
					prov,
					city,
					dist,
					address,
					num
				})
				if (res.status) {
					uni.showToast({
						title: '领取成功'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mian {
		padding: 32rpx 20rpx;

		.act1 {
			opacity: 0.45;
		}

		.total {
			width: 100%;
			height: 248rpx;
			border-radius: 16rpx;
			padding-left: 38rpx;

			@include bgi('../../../static/imgs/hehuoren.png') .title {
				padding-top: 68rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #402603;
			}

			.num {
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #402603;
				margin-top: 24rpx;

				text {
					font-size: 24rpx;
				}
			}
		}

		.tip {
			width: 100%;
			text-align: center;
			padding-top: 56rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.infoBox {
			.lable {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 20rpx;
				padding-top: 54rpx;
			}

			.infoBox-ul {
				width: 100%;
				height: auto;
				border-radius: 16rpx;
				background-color: #FFFFFF;
				margin-top: 26rpx;

				.infoBox-li {
					width: 100%;
					height: auto;
					border-bottom: 2rpx solid #F2F2F7;

					&:last-child {
						border-bottom: none
					}

					.text {
						padding-left: 20rpx;
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.input {
						height: 88rpx;
						display: flex;
						align-items: center;
						padding-right: 20rpx;

						input {
							height: 88rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							text-indent: 20rpx;
						}
					}
				}
			}
		}

		.config {
			margin: 40rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: #BCBCBC;
			border-radius: 16rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #666666;
		}

		.act {
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			color: #FFFFFF;
		}

	}
</style>
